<template>
  <div style="width: 45px">
    <div class="border-2 border-red-600">
      <div class="bg-red-600 m-[-1] w-100 text-white text-center" style="line-height: 18px;">{{ month }}</div>
      <div class="font-bold text-lg text-center">{{ day }}</div>
    </div>
    <span class="text-center text-red-600 inline-block w-full">{{year}}</span>
  </div>
</template>

<script>
const mapMonth = {
  1: 'Jan',
  2: 'Feb',
  3: 'Mar',
  4: 'Apr',
  5: 'May',
  6: 'Jun',
  7: 'Jul',
  8: 'Aug',
  9: 'Sept',
  10: 'Oct',
  11: 'Nov',
  12: 'Dec'
}

export default {
  props: ['date'],
  computed: {
    month() {
      let m = this.date.split('-')[1]
      if (m.substr(0, 1) === '0') {
        m = m.substring(1)
      }
      return mapMonth[m]
    },
    day() {
      return this.date.split('-')[2]
    },
    year() {
      return this.date.split('-')[0]
    }
  }
}
</script>

<style>
</style>